import 'package:flutter/material.dart';
import 'package:flutter_ui/common/app_theme.dart';

/// 菜单网格项组件
/// 用于显示带有图标和标题的网格项
/// 支持自定义内边距和点击事件
class MenuGridItem extends StatelessWidget {
  /// 图标
  final IconData icon;
  
  /// 标题
  final String title;
  
  /// 点击事件
  final VoidCallback? onTap;

  /// 内边距
  /// 可以通过此参数调整组件的整体内边距
  /// 默认会根据父容器高度动态计算垂直内边距
  final EdgeInsetsGeometry? padding;

  /// 构造函数
  const MenuGridItem({
    super.key,
    required this.icon,
    required this.title,
    this.onTap,
    this.padding,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据父容器约束动态计算尺寸
        final double maxWidth = constraints.maxWidth;
        final double maxHeight = constraints.maxHeight;
        
        // 根据容器尺寸动态计算图标和文字大小
        final double iconSize = maxWidth < 80 ? 20 : 24;
        final double fontSize = maxWidth < 80 ? 10 : 12;
        
        // 计算图标容器尺寸，确保不超过父容器的一定比例
        final double containerSize = maxWidth * 0.6;
        
        // 计算垂直内边距，确保组件能够在不同高度的容器中居中显示
        // 如需增加整体上下间距，可以调整这里的除数或者直接增加固定值
        final double verticalPadding = (maxHeight - containerSize - 60) / 4; // 增加减去的高度，为文本区域预留更多空间
        
        return InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(8),
          child: Container(
            // 调整整体内边距
            // 如需增加上下间距，可以修改vertical参数
            // 如需增加左右间距，可以添加horizontal参数
            padding: padding ?? EdgeInsets.symmetric(
              vertical: verticalPadding > 0 ? verticalPadding : 6, // 增加默认垂直内边距
              horizontal: 4, // 添加水平内边距
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 图标容器
                Container(
                  width: containerSize,
                  height: containerSize,
                  decoration: BoxDecoration(
                    color: AppTheme.primaryColor.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Icon(
                    icon,
                    color: AppTheme.iconColor,
                    size: iconSize,
                  ),
                ),
                // 图标和文本之间的间距
                // 如需增加图标和文本之间的间距，可以增加此值
                const SizedBox(height: 12), // 增加图标和文本之间的间距
                // 文本容器
                // 使用固定高度的容器，确保有足够空间显示文本
                Container(
                  height: 42, // 增加文本容器高度，确保有足够空间显示两行文本
                  padding: const EdgeInsets.symmetric(horizontal: 4), // 添加水平内边距
                  // 底部添加内边距，增加与下方元素的间距
                  margin: const EdgeInsets.only(bottom: 4), // 添加底部外边距
                  child: Text(
                    title,
                    style: TextStyle(
                      fontSize: fontSize, 
                      height: 1.2, // 行高设置，影响文本行间距
                    ),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                // 如需在底部添加额外间距，可以在这里添加一个SizedBox
                const SizedBox(height: 2), // 添加底部额外间距
              ],
            ),
          ),
        );
      },
    );
  }
}